<%-- 
    Document   : playlists
    Created on : Mar 27, 2013, 9:26:29 PM
    Author     : DinhNP
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<link href="css/block.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/commonjs.js"></script>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Xem Playlists</title>
        <script type="text/javascript">
            var xmlDoc;
            var xmlHttp;
            var byFeature = 1;
            var byDate=2;
            var byRandom=3;
            var noSorting = 4;
            var allPlaylists;

            function displayAllBlockPlaylists(){

                var path = "${pageContext.request.contextPath}/xml/Playlists.xml";
                xmlDoc = loadXMLDoc(path);
                var playlists = xmlDoc.getElementsByTagName("Playlist");
                allPlaylists = [];

                for (var i=0;i<playlists.length;i++){
                    var playlistID="";
                    var playlistName="";
                    var username="";
                    var playlistCover="";
                    var listenNumber="";
                    var dateCreated="";

                    if (playlists[i].getElementsByTagName("PlaylistID")[0].firstChild!=null){
                        playlistID = playlists[i].getElementsByTagName("PlaylistID")[0].firstChild.nodeValue.toString().trim();
                    }
                    if (playlists[i].getElementsByTagName("PlaylistName")[0].firstChild!=null){
                        playlistName = playlists[i].getElementsByTagName("PlaylistName")[0].firstChild.nodeValue.toString().trim();
                    }
                    if (playlists[i].getElementsByTagName("Username")[0].firstChild!=null){
                        username = playlists[i].getElementsByTagName("Username")[0].firstChild.nodeValue.toString().trim();
                    }
                    if (playlists[i].getElementsByTagName("PlaylistCover")[0].firstChild!=null){
                        playlistCover = playlists[i].getElementsByTagName("PlaylistCover")[0].firstChild.nodeValue.toString().trim();
                    }
                    if (playlists[i].getElementsByTagName("ListenNumber")[0].firstChild!=null){
                        listenNumber = playlists[i].getElementsByTagName("ListenNumber")[0].firstChild.nodeValue.toString().trim();
                    }
                    if (playlists[i].getElementsByTagName("DateCreated")[0].firstChild!=null){
                        dateCreated = playlists[i].getElementsByTagName("DateCreated")[0].firstChild.nodeValue.toString().trim();
                    }
                    
                    allPlaylists.push({
                        playlistID:playlistID,
                        playlistName:playlistName,
                        username:username,
                        playlistCover:playlistCover,
                        listenNumber:listenNumber,
                        dateCreated:dateCreated
                    });
                }
                bubbleSortByViews(allPlaylists);
                document.getElementById("output_hot_playlists").innerHTML = displayOneBlockPlaylist(allPlaylists, "PLAYLISTS NỔI BẬT",8,byFeature) ;
                bubbleSortByDate(allPlaylists);
                document.getElementById("output_lastest_playlists").innerHTML = displayOneBlockPlaylist(allPlaylists, "PLAYLISTS MỚI NHẤT",8,byDate);
                document.getElementById("output_random_playlists").innerHTML = displayOneBlockPlaylist(allPlaylists, "PLAYLISTS NGẪU NHIÊN", 8,byRandom);
                window.location.href="#top";
            }
            function bubbleSortByViews(array){
                var i;
                var j;
                var temp;
                for(i=0; i<array.length-1; i++){
                    for(j=i+1; j<array.length; j++){
                        if(parseInt(array[j].listenNumber) > parseInt(array[i].listenNumber)){
                            temp = array[j];
                            array[j] = array[i];
                            array[i] = temp;
                        }
                    }
                }
            }
            function bubbleSortByDate(array){
                var i;
                var j;
                var temp;
                var date1;
                var date2;
                for(i=0; i<array.length-1; i++){
                    for(j=i+1; j<array.length; j++){

                        date1 = new Date(array[i].dateCreated.toString().substr(0, 10));
                        date2 = new Date(array[j].dateCreated.toString().substr(0, 10));
                        if ( date2>date1){
                            temp = array[j];
                            array[j] = array[i];
                            array[i] = temp;
                        }
                    }
                }
            }
            function displayOneBlockPlaylist(array,tableName,numberOfplaylists, sortType){

                if (tableName.toString().toUpperCase().indexOf("NGẪU NHIÊN")!= -1){
                    for (var i = array.length - 1; i > 0; i--) {
                        var j = Math.floor(Math.random() * (i + 1));
                        var temp = array[i];
                        array[i] = array[j];
                        array[j] = temp;
                    }
                }
    
                if (Number(numberOfplaylists)>Number(array.length)){
                    numberOfplaylists = Number(array.length);
                }
                var output="<ul class='list_content'>"
                    +"<div class='list_content_header'>"+tableName+"</div>";
                for (var i=0;i<Number(numberOfplaylists);i++){
                    var imgSRC= "db/"+array[i].username.removeDotCharacter()+"/Playlist/"+array[i].playlistName.removeDotCharacter()+"/"+array[i].playlistCover;
                    if (array[i].playlistCover == "" || !isFileExists(imgSRC)){
                        imgSRC = "img/DefaultAlbumCover.jpg"; //set Default album cover
                    }
                    output += "<li class='item'>"
                        +"<div class='item_img'>"
                        +"<a href='viewPlaylist.jsp?PlaylistID="+array[i].playlistID+"'>"
                        +"<img src='"+imgSRC+"'/>"
                        +"</a></div>"
                        +"<p class='first_title'>"
                        +"<a href='viewPlaylist.jsp?PlaylistID="+array[i].playlistID+"'>"+array[i].playlistName+"</a>"
                        +"</p>"
                        +"<p class='second_title'>"
                        +"<a href='users.jsp?Username="+array[i].username+"'>"+array[i].username+"</a>"
                        +"</p></li>";
                }// end for
                if (sortType!=null){
                    if (sortType==4){
                        output += "<div class='view_all' onclick='displayPlaylistsByCondition("+sortType+")'><button onclick='displayPlaylistsByCondition("+sortType+")'>Trở lại</button></div></ul>";
                    }else output += "<div class='view_all' onclick='displayPlaylistsByCondition("+sortType+")'><button onclick='displayPlaylistsByCondition("+sortType+")'>Xem tất cả</button></div></ul>";
                }
                

                return output;
            }
            
            function displayPlaylistsByCondition(sortType){
                if (allPlaylists==null){
                    return;
                }else {
                    if (sortType!=null){
                        if (Number(sortType)==1){
                            document.getElementById("output_lastest_playlists").innerHTML = "";
                            document.getElementById("output_random_playlists").innerHTML = "";                
                            bubbleSortByViews(allPlaylists);
                            document.getElementById("output_hot_playlists").innerHTML = displayOneBlockPlaylist(allPlaylists, "PLAYLISTS NỔI BẬT",allPlaylists.length,noSorting) ;
                            window.location.href="#output_hot_playlists";
                        }else if(sortType==2){
                            document.getElementById("output_hot_playlists").innerHTML = "";
                            document.getElementById("output_random_playlists").innerHTML = "";
                            bubbleSortByDate(allPlaylists);
                            document.getElementById("output_lastest_playlists").innerHTML = displayOneBlockPlaylist(allPlaylists, "PLAYLISTS MỚI NHẤT",allPlaylists.length,noSorting) ;
                            window.location.href="#output_lastest_playlists";
                        }else if(sortType==3){
                            document.getElementById("output_hot_playlists").innerHTML = "";
                            document.getElementById("output_lastest_playlists").innerHTML = "";
                            document.getElementById("output_random_playlists").innerHTML = displayOneBlockPlaylist(allPlaylists, "PLAYLISTS NGẪU NHIÊN",allPlaylists.length,noSorting) ;
                            window.location.href="#output_random_playlists";
                        }else if(sortType==4){
                            displayAllBlockPlaylists();
                        }
                    }
                    return;
                }
            }
        </script>
    </head>
    <body onload="displayAllBlockPlaylists()">
        <!-- Include TOP  -->
        <%@include file="masterpage_top.jsp" %>

        <!-- MAIN CONTENT  -->
        <div id="middle">
            <div id="middle_content">
                <div id="output_hot_playlists"></div>
                <div id="output_lastest_playlists"></div>
                <div id="output_random_playlists"></div>
            </div>
        </div>

        <!-- Include BOTTOM  -->
        <%@include file="masterpage_bottom.jsp" %>
    </body>
</html>
